<script setup>
    import { ref } from 'vue'
    import Type from '@components/search/type'
    import Search from '@components/search/index'
    import PageWrapper from '@components/PageWrapper.vue'
    import { common, service } from '@utils'
    import TitleValue from '@components/TitleValue'
    import { useRoute } from 'vue-router'
    import { View } from '@element-plus/icons-vue'
    import { usePremission } from '@hooks'
    // import Detail from './Detail'

    const data = ref()

    const route = useRoute()

    const premission = usePremission({
        view: 'bfqz:order:view'
    })

    const searchs = ref([
        {
            type: Type.DATE_RANGE,
            width: 8
        },
        // {
        //     type: Type.INPUT,
        //     key: 'name',
        //     width: 5,
        //     placeholder: '商户名'
        // },
        // {
        //     type: Type.SELECT,
        //     key: 'state',
        //     width: 5,
        //     placeholder: '订单类别',
        //     valueKey: 'val',
        //     data: []
        // },
        // {
        //     type: Type.SELECT,
        //     key: 'stageState',
        //     width: 5,
        //     placeholder: '订单状态',
        //     valueKey: 'val',
        //     data: []
        // },
        {
            width: 6,
            type: Type.SEARCH_BUTTON
        }
    ])

    const pageRef = ref()
    const tableRef = ref()
    const detailRef = ref()
    const riskRef = ref()

    const expressMethods = ref()
    const expressCompanys = ref()
    const yesNo = ref()
    const sonStatuss = ref()

    let queryForm = {
        time: '',
        rentStartTime: new Date(),
        rentEndTime: new Date()
    }

    const numLine = ref(1)
    const onLineNum = (num) => {
        numLine.value = num
    }

    const onSearch = (param) => {
        queryForm = param
        pageRef.value.refresh()
    }

    const getData = async ({ pageNum, pageSize }, cb) => {

        const query = { ...queryForm }
        if (query.time && query.time.length > 0) {
        query.rentStartTime = query.time[0]
        query.rentEndTime = query.time[1]
        delete query.time
        } 
        const res = await service.statics.logistics(pageNum, pageSize, query)
        cb(res)
        setTimeout(() => {
            tableRef.value.scrollTo(0, 0)
        }, 0)
    }

    const getStatuss = async () => {
        const res = await service.sys.dictionaryAll()
        if (res) {
            let statuss = null
            let edpService = null
            for (let i = 0; i < res.length; i++) {
                if (res[i].code === 'orderState') {
                    statuss = res[i].list
                } else if (res[i].code === 'sonOrderState') {
                    sonStatuss.value = res[i].list
                } else if (res[i].code === 'fastMail') {
                    expressMethods.value = res[i].list
                } else if (res[i].code === 'fastMailCompany') {
                    expressCompanys.value = res[i].list
                } else if (res[i].code === 'yesNo') {
                    res[i].list.forEach((item) => {
                        item.val === 'true' && (item.val = true)
                        item.val === 'false' && (item.val = false)
                    })
                    yesNo.value = res[i].list
                } else if (res[i].code === 'edp-service') {
                    edpService = res[i].list
                }
            }
            searchs.value[3].data = statuss
            searchs.value[2].data = edpService
        }
    }

    const getDataStatements = async () => {
        const res = await service.statics.consume()
        data.value = res
    }

    getDataStatements()

    getStatuss()

    const width = (function (premission) {
        let width = 24
        premission.view && (width += 33 * 2)
        return Math.max(width, 72)
    })(premission)
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" @onLineNum="onLineNum" :on-load="true" />
        <page-wrapper @get-data="getData" ref="pageRef" :on-load="false">
            <template v-slot:default="props">
                <vxe-table
                    ref="tableRef"
                    :loading="props.loading"
                    :data="props.tableData.records"
                    :max-height="common.tableHeight(true, numLine, 147)"
                    highlight-hover-row
                    round
                    stripe
                    border
                >
                    <vxe-column type="seq" width="50" fixed="left"></vxe-column>
                    <vxe-column field="id" title="引流ID" width="180" fixed="left" />
                    <vxe-column field="source" title="来源" width="150" />
                    <vxe-column field="money" title="输入金额" width="80" />
                    <vxe-column field="phone" title="手机号" width="120" />
                    <vxe-column field="browsTime" title="浏览时间（s）" width="110" />
                    <vxe-column field="inDate" title="进入时间" width="100" />
                    <vxe-column field="outDate" title="离开时间" width="100" />
                    <vxe-column field="code" title="验证码" width="80" />
                    <vxe-column field="clickNumber" title="点击次数" width="80" />
                    <vxe-column field="url" title="url" width="500" />
                    <!-- <vxe-column title="订单状态" width="150">
                        <template #default="{ row }">
                            <el-tag>
                                {{
                                    common.getValueByKey('val', row.state, searchs[3].data, 'label')
                                }}
                            </el-tag>
                        </template>
                    </vxe-column> -->
                    <!-- <vxe-column title="操作" width="50" fixed="right">
                        <template #default="{ row }">
                            <section class="flex-align flex-wrap">
                                <el-tooltip
                                    v-if="premission.view"
                                    effect="dark"
                                    content="详情"
                                    placement="top"
                                    :enterable="false"
                                >
                                    <el-button
                                        type="primary"
                                        circle
                                        plain
                                        :icon="View"
                                        size="small"
                                        @click="detailRef.open(row)"
                                    ></el-button>
                                </el-tooltip>
                            </section>
                        </template>
                    </vxe-column> -->
                </vxe-table>
            </template>
        </page-wrapper>
        <!-- <detail
            ref="detailRef"
            :statuss="searchs[3].data"
            :sonStatuss="sonStatuss"
            :yesNo="yesNo"
            :expressMethods="expressMethods"
            :expressCompanys="expressCompanys"
            :edpService="searchs[2].data"
        /> -->
    </section>
</template>
<style lang="scss" scoped>
    :deep(.el-button + .el-button) {
        margin-left: 10px;
    }
</style>
